<template>
    <div class="commentDiv">
        <h1>评论列表</h1>
        <el-select v-model="currentCommentClass" placeholder="" style="margin-bottom:10px">
            <el-option v-for="commentClass, index in commentClassList" :key="index" :value="commentClass"
                :label="commentClass"></el-option>
        </el-select><br>
        <span style="color:red" v-if="isCommentNull && currentCommentClass === '我的评论'">暂无评论</span><br>
        <span style="color:red" v-if="isReplyNull && currentCommentClass === '回复'">暂无回复</span><br>
        <div v-for="comment, index in commentList" :key="comment.comment_id">
            <el-descriptions title="" direction="vertical" :column="3" border style="margin-bottom:20px">
                <el-descriptions-item label="回复我的用户" v-if="currentCommentClass === '回复'">
                    <el-input v-model="comment.user_id" disabled></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="我评论的用户" v-else>
                    <el-input v-model="comment.reply_to_id" disabled></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="该用户昵称" v-if="currentCommentClass === '我的评论'">
                    <el-input v-model="comment.nickname" disabled></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="该用户头像" v-if="currentCommentClass === '我的评论'">
                    <el-avatar :src="comment.avatar"></el-avatar>
                </el-descriptions-item>
                <el-descriptions-item label="该用户昵称" v-if="currentCommentClass === '回复'">
                    <el-input v-model="nicknameList[index]" disabled></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="该用户头像" v-if="currentCommentClass === '回复'">
                    <el-avatar :src="avatarUrlList[index]"></el-avatar>
                </el-descriptions-item>
                <el-descriptions-item label="内容">
                    <el-input v-model="comment.content" disabled></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="回复时间" v-if="currentCommentClass === '回复'">
                    <el-input v-model="format(comment.create_time).format" disabled></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="评论时间" v-else>
                    <el-input v-model="format(comment.create_time).format" disabled></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="评论位置" v-if="currentCommentClass === '我的评论'">
                    <el-input v-model="commentPositionList[index]" disabled></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="操作">
                    <el-button type="success" v-if="currentCommentClass === '回复'"
                        @click="sendReply(comment.user_id, index)">回复</el-button>
                    <el-button type="danger" v-else @click="del(comment.comment_id)">删除该评论</el-button>
                    <el-input type="textarea" v-if="currentCommentClass === '回复'" v-model="replyContent[index]"
                        style="margin-top:10px"></el-input>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div style="margin-top:10px">
            <div class="block">
                <el-pagination :current-page="currentPage" :page-size="pageSize" layout="total,  prev, pager, next,jumper"
                    :total="total" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import dateTime from '@/utils/date_time';
export default {
    data() {
        return {
            commentClassList: ['我的评论', '回复'],
            currentCommentClass: '我的评论',
            commentPositionList: [],
            replyContent: [],
            commentList: [],
            nicknameList: [],
            avatarUrlList: [],
            isCommentNull: true,
            isReplyNull: true,
            job_recruitment_id: '',
            job_recruitment_id_list: [],
            pageSize: 2,
            pagerCount: 0,
            total: 0,
            currentPage: 1,
        }
    },
    watch: {
        currentCommentClass: function () {
            this.getCommentList();
        }
    },
    methods: {
        del(id) {
            let that = this;
            if (!window.confirm("是否删除该评论")) {
                return;
            }
            axios({
                method: 'post',
                url: 'http://127.0.0.1:5000/api/comment/del',
                params: {
                    comment_id: id
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    if (response.data.result) {
                        that.$message.success("删除成功");
                        window.location.reload();
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        handleCurrentChange(val) {
            let that = this;
            that.avatarUrlList = [];
            that.nicknameList = [];
            if (that.currentCommentClass === '我的评论') {
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:5000/api/comment/get_list',
                    params: {
                        page: val,
                        size: that.pageSize,
                        user_id: window.localStorage.getItem("user_id")
                    },
                    headers: {
                        'X-Auth-Token': window.localStorage.getItem("token")
                    },
                })
                    .then(function (response) {
                        that.commentList = response.data.result.list;
                        that.total = Number.parseInt(response.data.result.count);
                        that.pagerCount = that.total % that.pageSize;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                        // 总是会执行
                    })
            } else {
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:5000/api/comment/get_list',
                    params: {
                        page: val,
                        size: that.pageSize,
                        reply_to_id: window.localStorage.getItem("user_id")
                    },
                    headers: {
                        'X-Auth-Token': window.localStorage.getItem("token")
                    },
                })
                    .then(function (response) {
                        that.commentList = response.data.result.list;
                        that.total = Number.parseInt(response.data.result.count);
                        that.pagerCount = that.total % that.pageSize;
                        response.data.result.list.forEach(element => {
                            that.getNickNameAndAvatar(element.user_id);
                            that.job_recruitment_id_list.push(element.source_id);
                        });
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                        // 总是会执行
                    })
            }
        },
        getCommentList() {
            let that = this;

            if (that.currentCommentClass === '回复') {
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:5000/api/comment/get_list',
                    params: {
                        reply_to_id: window.localStorage.getItem("user_id"),
                        page: that.currentPage,
                        size: that.pageSize
                    },
                    headers: {
                        'X-Auth-Token': window.localStorage.getItem("token")
                    },
                })
                    .then(function (response) {
                        if (response.data.result.list.length != 0) {
                            that.isReplyNull = false;
                            that.commentList = response.data.result.list;
                            that.total = Number.parseInt(response.data.result.count);
                            that.pagerCount = that.total % that.pageSize;
                            that.avatarUrlList = [];
                            that.nicknameList = [];
                            response.data.result.list.forEach(element => {
                                that.getNickNameAndAvatar(element.user_id);
                                that.job_recruitment_id_list.push(element.source_id);
                            });
                        } else {
                            that.commentList = response.data.result.list;
                            that.total = Number.parseInt(response.data.result.count);
                            that.pagerCount = that.total % that.pageSize;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                        // 总是会执行
                    })
            } else {
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:5000/api/comment/get_list',
                    params: {
                        user_id: window.localStorage.getItem("user_id"),
                        page: that.currentPage,
                        size: that.pageSize
                    },
                    headers: {
                        'X-Auth-Token': window.localStorage.getItem("token")
                    },
                })
                    .then(function (response) {
                        if (response.data.result.list.length != 0) {
                            that.isCommentNull = false;
                            that.commentList = response.data.result.list;
                            that.total = Number.parseInt(response.data.result.count);
                            that.pagerCount = that.total % that.pageSize;
                        } else {
                            that.commentList = response.data.result.list;
                            that.total = Number.parseInt(response.data.result.count);
                            that.pagerCount = that.total % that.pageSize;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                        // 总是会执行
                    })
            }
        },
        sendReply(id, index) {
            let that = this;
            axios({
                method: 'post',
                url: 'http://127.0.0.1:5000/api/comment/add',
                data: {
                    user_id: window.localStorage.getItem("user_id"),
                    reply_to_id: id,
                    content: that.replyContent[index],
                    nickname: that.nicknameList[index],
                    avatar: that.avatarUrlList[index],
                    source_table: 'job_recruitment',
                    source_field: 'job_recruitment_id',
                    source_id: that.job_recruitment_id[index],
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                    if (response.data.result) {
                        that.$message.success("回复成功");
                        window.location.reload();
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        getNickNameAndAvatar(id) {
            let that = this;
            axios({
                method: 'get',
                url: 'http://127.0.0.1:5000/api/user/get_obj',
                params: {
                    user_id: id
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                    if (response.data.result.obj) {
                        let nickname = response.data.result.obj.nickname;
                        let avatarUrl = response.data.result.obj.avatar.split('/');
                        avatarUrl = 'http://127.0.0.1:5000/' + avatarUrl[1] + "/" + avatarUrl[2] + "/avatar/" + avatarUrl[3];
                        that.nicknameList.push(nickname);
                        that.avatarUrlList.push(avatarUrl);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        format(create_time) {
            return dateTime.dateTime(create_time)
        },
        getJobTitleAndEnterPriseName(id) {
            let that = this;
            axios({
                method: 'get',
                url: 'http://127.0.0.1:5000/api/job_recruitment/get_obj',
                params: {
                    job_recruitment_id: id
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                    if (response.data.result.obj) {
                        let jobTitle = response.data.result.obj.job_title;
                        let enterpriseName = response.data.result.obj.enterprise_name;
                        that.job_recruitment_id = response.data.result.obj.job_recruitment_id;
                        that.commentPositionList.push("公司名称为:[" + enterpriseName + "]发布的职位[" + jobTitle + "]");
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        getCommentPosition(id) {
            let that = this;
            axios({
                method: 'get',
                url: 'http://127.0.0.1:5000/api/comment/get_obj',
                params: {
                    comment_id: id
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                    if (response.data.result.obj) {
                        that.getJobTitleAndEnterPriseName(response.data.result.obj.source_id);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        }
    },
    created: function () {
        let that = this;
        axios({
            method: 'get',
            url: 'http://127.0.0.1:5000/api/comment/get_list',
            params: {
                user_id: window.localStorage.getItem("user_id"),
                page: that.currentPage,
                size: that.pageSize
            },
            headers: {
                'X-Auth-Token': window.localStorage.getItem("token")
            },
        })
            .then(function (response) {
                console.log(response.data);
                if (response.data.result.list.length != 0) {
                    that.isCommentNull = false;
                    that.commentList = response.data.result.list;
                    that.total = Number.parseInt(response.data.result.count);
                    that.pagerCount = that.total % that.pageSize;
                    response.data.result.list.forEach(element => {
                        that.getCommentPosition(element.comment_id);
                    });
                }
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            })
    }
}
</script>
<style lang="less" scoped>
.commentDiv {
    margin-top: -500px;
    margin-left: 400px;
}
</style>